<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left" >
					<button plain class="back-btn" @click="goBack">返回</button>
					<span
						style="margin:0 18rpx 0 33rpx;  border-left: 1rpx solid #FFF2F2;width: 1rpx;height: 36rpx;"></span>
					<span style="color: #fff;">同步课程</span>
				</view>
				<view class="" slot="center">
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">字母</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
				</view>
				<view class="u-nav-slot-right flex-align-center" slot="right">
					<button plain class="back-btn">字母测试</button>
					<button plain class="back-btn">播放机</button>
					<button plain class="back-btn">大挑战</button>
					<image class="help" src="@/static/images/tongbu/help.png" alt="" />
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<view class="content-son">
				<view class="content-son-header flex-align-center">
					<view class="content-son-left-item " v-for="(item,index) in unitList" :key="index"
						:class="current=== index ?'active':''" @click="tabChange(index)">
						<span>{{item.name}}</span>
					</view>
				</view>
				<view class="content-son-content flex-align-center">
					<view class="content-son-content-item">
						<span class="title">字母听选</span>
						<view class="bj flex-center">
							<image  src="@/static/images/review/tingxuan.png" style="width: 112rpx;height: 92rpx;padding-left: 10rpx;"/>
						</view>
						<view class="num">
							0/0
						</view>
					</view>
					<view class="content-son-content-item">
						<span class="title">字母朗读</span>
						<view class="bj flex-center">
							<image  src="@/static/images/review/langdu.png" style="width: 129rpx;height: 121rpx;"/>
						</view>
						<view class="num">
							0/0
						</view>
					</view>
					<view class="content-son-content-item">
						<span class="title">字母听写</span>
						<view class="bj flex-center">
							<image  src="@/static/images/review/tingxie.png" style="width: 129rpx;height: 120rpx;"/>
						</view>
						<view class="num">
							0/0
						</view>
					</view>
					<view class="content-son-content-item">
						<span class="title">字母临写</span>
						<view class="bj flex-center">
							<image  src="@/static/images/review/linxie.png" style="width: 129rpx;height: 120rpx;"/>
						</view>
						<view class="num">
							0/0
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-tip">
			<view class="">
				今日学习效率:0%（00:00/00:00）
			</view>
			<view class="">
				今日词汇记忆 时长：00:00 数量：0个 速度：0个/小时
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				unitList: [{
						id: 1,
						name: 'Unit1'
					},
					{
						id: 2,
						name: 'Unit2'
					},
					{
						id: 3,
						name: 'Unit3'
					},
					{
						id: 4,
						name: 'Unit4'
					},
				]

			};
		},
		methods: {
			goBack() {
				this.$common.goBack()
			},
			tabChange(val) {
				console.log(val);
				this.current = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: radial-gradient(97.5% 97.5% at 50% 50.583333333333336%, rgba(34, 45, 245, 1) 0%, rgba(110, 117, 245, 1) 100%);
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

	}

	.u-nav-slot-right {
		button {
			margin-right: 20rpx !important;
		}
	}

	.help {
		width: px_2_vw(67);
		height: px_2_vw(60);
		// position: absolute;
		// right: 27rpx;
		// top: 31rpx;
	}

	.content {
		width: 90%;
		margin: 0 auto;
		background: rgba(147, 153, 250, 0.5);
		border-radius: 29rpx;
		height: 70%;
		// height: px_2_vw(929);
		padding: 48rpx;

		.content-son {
			width: 100%;
			height: 100%;
			background: rgba(217, 215, 215, 1);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			.content-son-header {
				width: 100%;
				padding: 0 77rpx;
				padding-top: 20rpx;
				height: px_2_vw(140);
				background: #9599ED;
				border-radius: 20rpx 20rpx 0 0;
				.content-son-left-item {
					height: px_2_vw(120);
					width: px_2_vw(373);
					line-height: px_2_vw(120);
					border-radius: 30rpx 30rpx 0 0;
					text-align: center;
					font-size:  px_2_vw(36);
				}
			}

			.content-son-content {
				flex: 1;
				padding: 0 77rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.content-son-content-item {
					height: px_2_vw(415);
					width: px_2_vw(309);
					background: #fff;
					border-radius: 55rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					.title {
						font-size:  px_2_vw(40);
						font-weight: 600;
					}
					.bj {
						height: px_2_vw(190);
						width: px_2_vw(190);
						background: radial-gradient(54.21% 49.74% at 50% 50.259067357512954%, #464FF5 0%, #464FF5 100%);
						border-radius: 50%;
						border: 14rpx solid #B1B5FC;
					}
					.num {
						color: #5E66F6;
						font-weight: 600;
						font-size:  px_2_vw(48);
					}
				}

			}
		}
	}
	.bottom-tip {
		position: absolute;
		bottom: 22rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;
		font-size: 24rpx;
		width: 80%;
		padding-left: 20%;
	}
	.active {
		background: #D9D7D7;
		font-weight: bolder;
		
		
	}
</style>